<template>

  <el-dialog
    title="选择用户"
    :visible.sync="dialogVisible"
    width="60%"
    :close-on-click-modal="false"
    @close="handleClose"
  >

    <div class="app-container">
      <data-table
        ref="pagingTable"
        :options="options"
        :list-query="listQuery"
        @select-changed="handleSelected"
      >
        <template slot="filter-content">

          <el-row>
            <el-col :span="24" style="display: flex; align-content: center">
              <depart-tree-select v-model="listQuery.params.deptCode" class="filter-item" style="width: 200px;" />
              <el-input v-model="listQuery.params.userName" style="width: 200px;" placeholder="用户名/姓名" class="filter-item" />

              <div style="flex-grow: 1; text-align: right">
                <el-button type="primary" class="filter-item" style="float:  right" @click="handleConfirm">{{ selectedLabel }}</el-button>
              </div>
            </el-col>
          </el-row>

        </template>

        <template slot="data-columns">

          <el-table-column
            label="用户名"
            align="center"
            prop="userName"
          />

          <el-table-column
            label="姓名"
            align="center"
            prop="realName"
          />

        </template>

      </data-table>

    </div>

  </el-dialog>

</template>

<script>
import DataTable from '@/components/DataTable'
import DepartTreeSelect from '../../depart/components/DepartTreeSelect'

export default {
  name: 'UserSelectDialog',
  components: { DepartTreeSelect, DataTable },
  props: {
    excludes: Array,
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      selectedLabel: '请勾选用户',
      listQuery: {
        current: 1,
        size: 6,
        params: {
          excludes: []
        }
      },
      // 选定的数据列表
      selectedList: [],
      selectedObjs: [],
      options: {
        // 可批量操作
        multi: true,
        multiShow: false,
        // 列表请求URL
        listUrl: '/api/sys/user/paging'
      }
    }
  },

  watch: {

    // 检测查询变化
    dialogShow: {
      handler() {
        this.dialogVisible = this.dialogShow
      },
      deep: true
    },

    excludes: {
      handler() {
        this.listQuery.params.excludes = this.excludes
        this.$refs.pagingTable.getList()
      },
      deep: true
    }
  },

  created() {
    this.dialogVisible = this.dialogShow
  },

  methods: {

    handleSelected(obj) {
      this.selectedList = obj.ids
      this.selectedObjs = obj.objs
      this.selectedLabel = '确认' + this.selectedList.length + '项'
    },

    handleClose() {
      this.$emit('update:dialogShow', false)
    },

    handleConfirm() {
      if (this.selectedList === null || this.selectedList.length === 0) {
        this.$message({
          type: 'error',
          message: '请至少勾选一个用户！!'
        })
        return
      }

      this.$emit('update:dialogShow', false)
      this.$emit('select', this.selectedList, this.selectedObjs)
    }

  }
}
</script>

<style scoped>

  /deep/
  .el-dialog__body{
    padding: 0px;
  }
</style>
